<div class="top">
  <app-left-top-panel [type]="'ira'"></app-left-top-panel>
</div>

<div class="bottom">
  <!-- <app-video-list></app-video-list> -->
  <div class="video-wrap">
    <!-- <div class="btn-arrow" (click)="arrowToggle = !arrowToggle" [ngClass]="arrowToggle ? 'arrow-up' : 'arrow-down'"></div> -->
    <div class="video-box" *ngFor="let item of videos">
      <app-map-video [monitorId]="item.id"></app-map-video>
    </div>
  </div>
</div>

<div class="right">
  <app-ira-right-panel></app-ira-right-panel>
</div>

<div class="point" [ngClass]="'point' + idx" *ngFor="let item of points;let idx = index">
  <img class="p-img icon-office" (mouseenter)="item.eHover = true" (mouseleave)="item.eHover = false"
    (click)="item.eClick = !item.eClick" src="./assets/images/mapicon/icon-office.png" alt="">
  <div class="p-cont bg-ira" [ngClass]="item.className" [hidden]="!(item.eHover || item.eClick)">
    <div class="title">
      <!-- <span></span> -->
      <span>{{ item.name }}</span>
    </div>
    <ul>
      <li>
        <span>引水流量：{{ item.flow }}m³/s</span>
        <span>灌溉面积：{{ item.irrArea }}万亩</span>
        <!-- <span>灌溉进度：{{ item.irrAreaPer | percent }}</span> -->
      </li>
    </ul>
  </div>
  <!-- <img class="line" [ngClass]="item.className" src="./assets/images/display/icon2.png" alt=""> -->
</div>
